<template>
  <div class="pg_home">
    <el-container>
      <MenuAside v-model:show="isCollapse"></MenuAside>
      <el-container>
        <el-header>
          <el-breadcrumb separator="/">
            <template v-for="item of breadCrumbs" :key="item.title">
              <el-breadcrumb-item :path="{ to: item.path }">{{
                item.title
              }}</el-breadcrumb-item>
            </template>
          </el-breadcrumb>

          <el-popconfirm title="您确定退出吗？" @confirm="signout">
            <template #reference>
              <div>退出</div>
            </template>
          </el-popconfirm>
        </el-header>
        <el-main>
          <Layout> </Layout>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { useAsyncRoute, useSession } from '@/hooks'

const route = useRoute()
const router = useRouter()
const { clearSession } = useSession()
const { removeRoleRoutes } = useAsyncRoute()
const isCollapse = ref(false)

// 面包屑
const breadCrumbs = computed(() => {
  return route.matched.map((v) => {
    return {
      title: v.meta.title,
      path: v.path,
    }
  })
})

const signout = () => {
  clearSession()
  router.replace(`/login?redirect=${encodeURIComponent(route.path)}`)
  removeRoleRoutes()
}
</script>

<style lang="scss" scoped>
.pg_home {
  min-width: 1100px;
  height: 100vh;
  background-color: #545c64;

  .el-container,
  .el-main {
    height: 100%;
    background: #fff;
  }

  .el-header {
    @include flex(row, space-between, center);

    border: 1px solid #ccc;
  }

  .el-main {
    padding: 10px;
    overflow-y: auto;
  }

  .el-menu {
    overflow-y: auto;
  }
}
</style>
